var vm = new Vue({
	el : '#rrapp',
	data : {
		payShowInfo : [],
		addByList:[],
		lostByList:[]
	},
	created: function() {
		var workNo = GetRequest(location.search)["workNo"];
		var month = GetRequest(location.search)["month"];
		
		var data=JSON.stringify({"workNo":workNo,"month":month});
		console.log(data)
		$.ajax({
			type: "POST",
            url: "../datapayroll/infoXtd",
            data: data,
            contentType : "application/json;charset=utf-8",
            dataType : "json",
            success: function(r){
            	vm.payShowInfo = r.payShowInfo;
            	vm.addByList = r.addByList;
            	vm.lostByList = r.lostByList;
            	console.log(vm.payShowInfo)
            	console.log(vm.addByList)
            	console.log(vm.lostByList)
            	initGrid(vm.payShowInfo);
            	initGridAdd(vm.addByList);
            	initGridLost(vm.lostByList);
                     }
		})
	}
});

function initGrid(data) {
	$("#jqGrid").jqGrid({
		datatype : 'local',
		data: data || [],
		colModel : [{
			label: '姓名',
			name : "name",
			index : "name",
			align : 'center',
			width : '50'
		}, {
			label: '工号',
			name : "workNo",
			index : "workNo",
			align : 'center',
			width : '100'
		}, {
			label: '合同编号',
			name : "contractNo",
			index : "contractNo",
			width : '100'
		}, {
			label: '合同签约时间',
			name : "contractDate",
			index : "contractDate",
			width : '100'
		},{
			label: '实收',
			name : "splitMoney",
			index : "splitMoney",
			align : 'center',
			width : '100'
		}, {
			label: '签约人姓名',
			name : "employeeName",
			index : "employeeName",
			align : 'center',
			width : '100'
		}, {
			label: '合同总应收',
			name : "hasPaidMoney",
			index : "hasPaidMoney",
			align : 'center',
			width : '100'
		}, {
			label: '合同总未收',
			name : "noPaidMoney",
			index : "noPaidMoney",
			align : 'center',
			width : '100'
		}, {
			label: '支付时间',
			name : "payTime",
			index : "payTime",
			align : 'center',
			width : '100'
		}],
		rowNum: data.length,
		multiselect : false,
		height: 385,
		gridComplete : function() {
			// 隐藏grid底部滚动条
			$(this).closest(".ui-jqgrid-bdiv").css({
				"overflow-x" : "hidden"
			});
			$(this).jqGrid("setGridWidth", vm.$el.offsetWidth * 1, true);
			$(this).jqGrid("setLabel", 'rn', '序号', {'text-align': 'center'});
		},
		rownumbers: true,
		rownumWidth: 40,
	});
}
function initGridAdd(data) {
	$("#jqGridAdd").jqGrid({
		datatype : 'local',
		data: data || [],
		colModel : [{
			label: 'id',
			name : "id",
			index : "id",
			align : 'center',
			hidden : true
		},{
			label: '姓名',
			name : "workname",
			index : "workname",
			align : 'center',
			width : '50'
		}, {
			label: '工号',
			name : "workno",
			index : "workno",
			align : 'center',
			width : '100'
		},{
			label: '金钱',
			name : "money",
			index : "money",
			width : '100'
		}, {
			label: '事由',
			name : "memo",
			index : "memo",
			align : 'center',
			width : '100'
		}, {
			label: '年',
			name : "year",
			index : "year",
			align : 'center',
			width : '100'
		}, {
			label: '月',
			name : "month",
			index : "month",
			align : 'center',
			width : '100'
		}],
		rowNum: data.length,
		multiselect : false,
		height: 385,
		gridComplete : function() {
			// 隐藏grid底部滚动条
			$(this).closest(".ui-jqgrid-bdiv").css({
				"overflow-x" : "hidden"
			});
			$(this).jqGrid("setGridWidth", vm.$el.offsetWidth * 1, true);
			$(this).jqGrid("setLabel", 'rn', '序号', {'text-align': 'center'});
		},
		rownumbers: true,
		rownumWidth: 40,
	});
}
function initGridLost(data) {
	$("#jqGridLost").jqGrid({
		datatype : 'local',
		data: data || [],
		colModel : [{
			label: 'id',
			name : "id",
			index : "id",
			align : 'center',
			hidden : true
		},{
			label: '姓名',
			name : "workname",
			index : "workname",
			align : 'center',
			width : '50'
		}, {
			label: '工号',
			name : "workno",
			index : "workno",
			align : 'center',
			width : '100'
		},{
			label: '金钱',
			name : "money",
			index : "money",
			width : '100'
		}, {
			label: '事由',
			name : "memo",
			index : "memo",
			align : 'center',
			width : '100'
		}, {
			label: '年',
			name : "year",
			index : "year",
			align : 'center',
			width : '100'
		}, {
			label: '月',
			name : "month",
			index : "month",
			align : 'center',
			width : '100'
		}],
		rowNum: data.length,
		multiselect : false,
		height: 385,
		gridComplete : function() {
			// 隐藏grid底部滚动条
			$(this).closest(".ui-jqgrid-bdiv").css({
				"overflow-x" : "hidden"
			});
			$(this).jqGrid("setGridWidth", vm.$el.offsetWidth * 1, true);
			$(this).jqGrid("setLabel", 'rn', '序号', {'text-align': 'center'});
		},
		rownumbers: true,
		rownumWidth: 40,
	});
}